<template>
  <div class="container">
    <c-r-m-head
      ref="crmTableHead"
      :crm-type="crmType"
      :main-title="'新增签章'"
      @handle="handleHandle"
      @on-search="crmSearch"
      placeholder="请选择"
    >
    </c-r-m-head>
    <div class="table-container">
      <el-table
        v-loading="loading"
        id="crm-table"
        :row-height="40"
        :data="list"
        border
        :cell-class-name="cellClassName"
        :height="tableHeight"
        :row-key="`${crmType}Id`"
        class="n-table--border"
        highlight-current-row
        style="width: 100%"
        @row-click="handleRowClick"
        @sort-change="sortChange"
      >
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="fieldFormatter"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <template v-if="item.prop == 'fun'">
              <span class="can-visit--underline" @click="lockRow(scope.row)"
                >查看明细</span
              >
            </template>
            <template v-else>
              {{ fieldFormatter(scope.row, scope.column) }}
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          :pager-count="5"
          class="p-bar"
          background
          layout="prev, pager, next, sizes, total, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import CRMHead from "../components/CRMHead.vue";

import { getCrmField } from "@/api/admin/agreement";
import Table from "../mixin/Table";
export default {
  name: "Signature",
  components: {
    CRMHead
  },
  mixins: [Table],
  data() {
    return {
      crmType: "signature"
    };
  },
  mounted() {
    /** 控制table的高度 */
    window.onresize = () => {
      this.tableHeight = document.documentElement.clientHeight - 270;
    };
    // getCrmField().then(res => {
    //   console.log(res);
    // });
  },
  methods: {
    handleHandle(data) {
      this.getList();
    },
    /** 搜索 */
    crmSearch(options) {
      this.currentPage = 1;
      this.pageSize = 15;
      this.getList(options);
    },

    /**
     * 通过回调控制class
     */
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === "enterpriseName") {
        return "can-visit--col";
      } else {
        return "";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.table-container {
  margin-top: 16px;
}
#crm-table {
  padding: 16px;
}
</style>
